<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { useCustomerStore, useSystemStore } from '@/store';
  import CustomerListModal from './components/customer.vue';
  import SalesPicker from '@/components/sales-picker/index.vue';
  import dayjs from 'dayjs';

  const modalVisible = ref(false);
  const customerStore = useCustomerStore();
  const systemStore = useSystemStore();
  const customerListModalRef = ref();
  const detail = ref<any>({
    statusValue: '1',
    customer: {},
  });
  const list = ref<any>([]);
  const searchForm = ref<any>({});

  onMounted(async () => {
    fetchList();
    await systemStore.getAreas();
  });

  async function fetchList() {
    list.value = await customerStore.getCustomerFollows(searchForm.value);
  }

  async function handleRemove(record: any) {
    await customerStore.deleteCustomerFollow({ id: record.id });
    await fetchList();
  }

  function handleAdd() {
    detail.value = {
      statusValue: '1',
      customer: {},
    };
    modalVisible.value = true;
  }

  function handleEdit(record: any) {
    detail.value = record;
    detail.value.serviceTime = [record.startedAt, record.endedAt];
    modalVisible.value = true;
  }

  async function handleSave() {
    await customerStore.saveCustomerFollow({
      id: detail.value.id,
      customerId: detail.value.customerId,
      startedAt: detail.value.serviceTime[0],
      endedAt: detail.value.serviceTime[1],
      electricityConsumption: detail.value.electricityConsumption,
    });
    await fetchList();
    modalVisible.value = false;
  }

  async function handleSearch() {
    await fetchList();
  }

  async function handleReset() {
    searchForm.value = {};
    await fetchList();
  }

  function handleMonthPicker(date: any) {
    searchForm.value.createdAt = [dayjs(date).startOf('month'), dayjs(date).endOf('month')];
  }

  function handleCustomerSelect(record: any) {
    detail.value.customer.companyName = record.companyName;
    detail.value.customerId = record.id;
    customerListModalRef.value.hide();
  }
</script>

<template>
  <div class="container">
    <breadcrumb :items="['menu.customer.management', 'menu.customer.follow']" />
    <a-card>
      <a-row :gutter="16" :wrap="false">
        <a-col flex="auto" style="padding-right: 16px">
          <a-row :gutter="16">
            <a-col :flex="8">
              <a-form-item label="销售员" style="margin-bottom: 0">
                <sales-picker v-model="searchForm.salesId" />
              </a-form-item>
            </a-col>
            <a-col :flex="8">
              <a-form-item label="客户名称" style="margin-bottom: 0">
                <a-input placeholder="请输入客户名称" v-model="searchForm.companyName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :flex="8">
              <a-form-item label="创建时间" style="margin-bottom: 0">
                <a-month-picker style="width: 100%" @change="handleMonthPicker"></a-month-picker>
                <!-- <a-range-picker v-model="searchForm.createdAt" style="width: 100%" /> -->
              </a-form-item>
            </a-col>
          </a-row>
        </a-col>
        <a-col flex="160px" style="border-left: 1px solid #e5e6eb; padding-left: 16px">
          <a-space :size="16">
            <a-button type="primary" @click="handleSearch()">搜索</a-button>
            <a-button type="primary" @click="handleReset()">重置</a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-divider margin="16px"></a-divider>
      <a-button type="primary" style="margin-bottom: 16px" @click="handleAdd" size="small">新增</a-button>
      <a-table :data="list">
        <template #columns>
          <a-table-column title="序号" :width="80">
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column title="销售员" data-index="customer.salesman.realName"></a-table-column>
          <a-table-column title="客户名称" data-index="customer.companyName"></a-table-column>
          <!-- <a-table-column title="开始时间" data-index="startedAt" :width="160">
            <template #cell="{ record }">
              {{ dayjs(record.startedAt).format('YYYY-MM-DD') }}
            </template>
          </a-table-column> -->
          <!-- <a-table-column title="结束时间" data-index="endedAt" :width="160">
            <template #cell="{ record }">
              {{ dayjs(record.endedAt).format('YYYY-MM-DD') }}
            </template>
          </a-table-column> -->
          <a-table-column title="年用电量(万千瓦时)" data-index="electricityConsumption" :width="200">
            <template #cell="{ record }">
              {{ record.electricityConsumption.toFixed(4) }}
            </template>
          </a-table-column>
          <a-table-column title="创建时间" data-index="createdAt" :width="220"></a-table-column>
          <a-table-column title="操作" :width="160">
            <template #cell="{ record }">
              <a-space>
                <a-button type="primary" @click="handleEdit(record)" size="small">编辑</a-button>
                <a-popconfirm content="您确认移除么?" @ok="handleRemove(record)">
                  <a-button type="primary" status="danger" size="small">移除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>
    <a-modal :visible="modalVisible" :title="detail.id ? '编辑客户' : '新增客户'" @cancel="modalVisible = false" @ok="handleSave">
      <a-form :model="{}" auto-label-width v-if="detail">
        <a-form-item label="客户名称" required>
          <a-space>
            <a-input v-model="detail.customer.companyName" placeholder="请选择客户" readonly />
            <a-button type="primary" @click="customerListModalRef.show()">选择</a-button>
          </a-space>
        </a-form-item>
        <a-form-item label="服务时间" required>
          <a-range-picker style="width: 100%" v-model="detail.serviceTime" />
        </a-form-item>
        <a-form-item label="年用电量" required>
          <a-input-number v-model="detail.electricityConsumption" :precision="4" placeholder="请输入年用电量" hide-button>
            <template #suffix>
              <span>万千瓦时</span>
            </template>
          </a-input-number>
        </a-form-item>
        <a-form-item label="业务员" required>
          <sales-picker v-model="detail.salesId" :default-account="true" />
        </a-form-item>
      </a-form>
    </a-modal>
    <CustomerListModal ref="customerListModalRef" @select="handleCustomerSelect" />
  </div>
</template>

<style lang="less" scoped>
  .container {
    padding: 0 16px;
  }
</style>
